﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Products.aspx.cs" Inherits="famails.BackEnd.Customer.Products" MasterPageFile="~/Master.Master" %>


<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
    <style>
        #dropDownButtonContentdropDownButton {
                    margin-top:-3px !important;
                }
    </style>
    <style>
                table th {
                    padding: 10px !important;
                    background: #333 !important;
                    color: #fff !important;
                    font-weight: bold !important;
                }

                table td {
                    padding: 5px !important;
                }
            </style>
    <div style="width: 100%; padding: 10px;">
        <div class="col-md-12 col-xs-12 col-sm-12 col-lg-12" style="border: 1px solid #333; margin-bottom: 10px; padding: 0px;">
            <div class="col-md-12 col-xs-12 col-sm-12 col-lg-12" style="padding: 10px 20px; background: #000; color: #fff; font-size: 18px; font-weight: bold; position: relative;">
                Thêm sản phẩm
            </div>
            <div class="col-md-12 col-xs-12 col-sm-12 col-lg-12" style="height: auto; padding: 10px;">
                <asp:HiddenField ID="hdfProductId" runat="server" />
                <asp:HiddenField ID="hdfProductId1" runat="server" />
                <asp:Panel Visible="false" ID="pnError" runat="server">
                    <div class="error-box round">
                        <asp:Label ID="lblError" runat="server" Text=""></asp:Label>
                    </div>
                </asp:Panel>
                <asp:Panel Visible="false" ID="pnSuccess" runat="server">
                    <div class="confirmation-box round">
                        <asp:Label ID="lblSuccess" runat="server" Text=""></asp:Label>
                    </div>
                </asp:Panel>
            </div>
            <div class="col-md-6 col-xs-12 col-sm-6 col-lg-6" style="height: auto; padding: 10px;">
                <fieldset>
                    <p>
                        <label for="simple-input" style="font-weight: bolder; text-transform: none">
                            Tên sản phẩm</label>
                        <asp:TextBox ID="txtName" CssClass="form-control" Style="border: 1px solid #333; border-radius: 0px;" runat="server"></asp:TextBox>
                        <em style="color: #333;">Tên đầy đủ của sản phẩm</em>
                    </p>
                </fieldset>
            </div>


            <div class="col-md-6 col-xs-12 col-sm-6 col-lg-6" style="height: auto; padding: 10px;">
                <fieldset>
                    <p>
                        <label for="simple-input" style="font-weight: bolder; text-transform: none">
                            Mã sản phẩm</label>
                        <asp:TextBox ID="txtCode" CssClass="form-control" Style="border: 1px solid #333; border-radius: 0px;" runat="server"></asp:TextBox>
                        <em style="color: #333;">Mã sản phẩm.</em>
                    </p>
                </fieldset>
            </div>
            <div class="col-md-3 col-xs-12 col-sm-3 col-lg-2" style="height: auto; padding: 10px;">
                <fieldset>
                    <p>
                        <label for="simple-input" style="font-weight: bolder; text-transform: none">
                           Nhóm sản phẩm</label>
                        <div id="dropDownButton" class="form-control" style="margin-top:-10px;background: #fff; color: #333; border: 1px solid #333; border-radius: 0px; height: 32px;">

                            <div id="jqxTree">
                            </div>
                        </div>
                    </p>
                </fieldset>
            </div>
            <div class="col-md-3 col-xs-12 col-sm-3 col-lg-4" style="height: auto; padding: 10px;">
                <fieldset>
                        <label for="simple-input" style="font-weight: bolder; text-transform: none">
                            Giá bán</label>
                        <div id="txtPrice1" class="form-control" Style="border: 1px solid #333; border-radius: 0px;"></div>
                    <asp:HiddenField runat="server" ID="txtPrice" />
                </fieldset>
            </div>

            <div class="col-md-6 col-xs-12 col-sm-6 col-lg-6" style="height: auto; padding: 10px;padding-top:35px;">
                <button validationgroup="CheckInput_Email" runat="server" class="btn col-xs-4 col-lg-3 col-md-4 col-sm-4" style=" border:1px solid #fff; float: left; background: #333; color: #fff; text-align: center; padding: 6px 15px; border-radius: 0px;"
                    onserverclick="btnAdd_Click">
                    <i style="margin-right: 10px;" class="fa fa-save"></i>Lưu
                </button>
                <button validationgroup="CheckInput_Email" runat="server" class="btn col-xs-8 col-lg-3 col-md-4 col-sm-4" style="  border:1px solid #fff;float: left; background: #333; color: #fff; text-align: center; padding: 6px 15px; border-radius: 0px;"
                    onserverclick="btnRefesh_Click">
                    <i style="margin-right: 10px;" class="fa fa-refresh"></i>Nhập lại
                </button>
                <a href="ProductList.aspx" style="float: left; border:1px solid #fff; background: #333; color: #fff; text-align: center; padding: 5px 15px; border-radius: 0px;" class="btn col-xs-12 col-lg-4 col-sm-6 col-md-5"><span class="fa fa-sign-out" style="margin-right: 10px;"></span>Quay lại danh sách</a>

            </div>
            
        </div>
    </div>
    <input type="hidden" name="groupid" id="groupid" value="-1" />
    <script type="text/javascript">
        jQuery(function ($) {
            $("#txtPrice1").jqxNumberInput({ height: '32', value: 0, max: 100000000000, digits: 12, min: 0 });
            $('#txtPrice1').on('change', function () {
                $('#ContentPlaceHolder1_txtPrice').val($('#txtPrice1').val());
            });
            if ($('#ContentPlaceHolder1_txtPrice').val() != undefined)
                $('#txtPrice1').val($('#ContentPlaceHolder1_txtPrice').val());
                
            loadProductGroup();
            function loadProductGroup() {
                $.ajax({
                    type: "POST",
                    url: "Products.aspx/LoadTree",
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function (data) {
                        if (data.d != undefined) {
                            var html = "<ul>";
                            $.each(data.d, function (i, item) {
                                if (item.ProductGroupName != undefined) {
                                    if (i == 0) html += "<li  item-selected='true' item-expanded='true' item-value='" + item.ProductGroupID + "' id='xxxx" + item.ProductGroupID + "'>" + item.ProductGroupName;
                                    else html += "<li item-expanded='true' item-value='" + item.ProductGroupID + "' id='xxxx" + item.ProductGroupID + "'>" + item.ProductGroupName;
                                    //alert(item.children.count);
                                    if (item.children != "") {
                                        html += "<ul>";
                                        html += getChild(item.children);
                                        html += "</ul>";
                                    }
                                    html += "</li>";
                                }
                            });
                            html += "</ul>";
                        }
                        //alert(html);
                        $("#jqxTree").append(html);
                        $("#dropDownButton").jqxDropDownButton({ width: 150, height: 20 });
                        $('#jqxTree').on('select', function (event) {
                            var args = event.args;
                            var item = $('#jqxTree').jqxTree('getItem', args.element);
                            $("#groupid").val(item.value);
                            //alert(item.value);
                            var dropDownContent = '<div style="position: relative; margin-left: 3px; margin-top: 5px;">' + item.label + '</div>';
                            $("#dropDownButton").jqxDropDownButton('setContent', dropDownContent);
                        });
                        $("#jqxTree").jqxTree({ width: 200, height: 220 });
                        var editvalue=('xxxx' + $('#ContentPlaceHolder1_hdfProductId1').val());
                        $('#jqxTree').jqxTree('val', editvalue, { label: 'new value' });
                        //alert(editvalue);
                    }
                });
            }
            
            function getChild(child) {
                var html = "";
                if (child != "") {
                    $.each(child, function (i, item) {
                        if (item.ProductGroupID == 2) html += "<li  item-selected='true' item-expanded='true' item-value='" + item.ProductGroupID + "' id='xxxx" + item.ProductGroupID + "'>" + item.ProductGroupName;
                        else html += "<li item-expanded='true' item-value='" + item.ProductGroupID + "' id='xxxx" + item.ProductGroupID + "'>" + item.ProductGroupName;
                        if (item.children != "") {
                            html += "<ul>";
                            html += getChild(item.children);
                            html += "</ul>";
                        }
                        html += "</li>";
                    });
                }
                return html;
            }
            //$('#jqxTree').jqxTree('val', 'id' + $('#ContentPlaceHolder1_hdfProductId').val(), { label: 'new value' });
           
            //alert($('#jqxTree').jqxTree('val').value);
        });
    </script>
</asp:Content>
